<template>
  <view class="container">
    <!-- 顶部用户信息区域 -->
    <view class="top-user-area">
      <view class="user-info">
        <image class="user-avatar" src="/static/5d8233517b939cc7ae21c8be1249516c95942fe23535a-edkNAd_fw1200_1.png"></image>
        <view class="user-details">
          <view class="user-name">{{shops.name}}</view>
          <view class="user-subtitle">
			      <image class="gonghao-icon" src="/static/index/huiyuan 1.png"></image>
            <text class="subtitle-text">台球管理</text>
          </view>
        </view>
		   		<image class="more-icon" src="/static/index/Group_427319296.png"></image>
      </view>
      
      <!-- 警告提示 -->
      <view class="warning-tips">
		 <image class="tips-text" src="/static/index/jinggaotext.png"></image>
		 <image class="tips-xu" src="/static/index/Line_23.png"></image>
		  <view class="tips-right">
			  <view class="tip-item">
			    <text class="item-hong">警告</text>
			    <text class="tip-text">请点击设备管理管理进行博奕</text>
			  </view>
			  <view class="tip-item">
			    <text class="item-huang">提示</text>
			    <text class="tip-text">未开启：请点击设备管理管理进行login</text>
			  </view>
		  </view>
     
      </view>
    </view>

    <!-- 核心数据区域 -->
    <view class="core-data-area">
		<view class="fiex-img">
			<image src="/static/index/c7dbebdcedb4affedb770b65eb12dc00794d46397d86-fMnzwc_fw1200 1.png"></image>
		</view>
     <view class="data-header">
       <!-- <text class="data-title"></text> -->
	   <view>
		   <image class="data-title" src="/static/index/hexing.png"></image>
		   <image class="data-titles" src="/static/index/Group 427319300.png"></image>
		   
	   </view>
		
		<view class="date-range">
          <text class="date-text">今日</text>
          <image class="date-icon" src="/static/index/xiangxia_1.png"></image>
        </view>
      </view>
      <view class="date-filter">
       数据周期： <text class="filter-date">2025/02/03-2025/02/03</text>
      </view>
      <view class="data-cards">
        <view class="data-card">
          <view class="card-content">
            <text class="card-title">营业额</text>
            <text class="card-value">10,000</text>
          </view>
<!--          <view class="card-chart">
            <image class="chart-image" src="/static/Group_427319278.png"></image>
          </view> -->
        </view>
        <view class="data-grid">
          <view class="grid-item">
			<image src="/static/index/kerenfenxi 1.png"></image>
            <text class="grid-label">订单数</text>
            <text class="grid-value">9</text>
          </view>
          <view class="grid-item">
			  <image src="/static/index/yichoujine 1.png"></image>
            <text class="grid-label">退减额</text>
            <text class="grid-value">9</text>
          </view>
          <view class="grid-item">
			  <image src="/static/index/a-4_E616__xinke1 2.png"></image>
            <text class="grid-label">新客人</text>
            <text class="grid-value">9</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 公告区域 -->
    <view class="announcement-area">
      <view class="announcement-content">
        <image class="announcement-icon" src="/static/index/gonggao.png"></image>
            <text class="section-title">公告</text>
		<text class="announcement-text">公告：欢迎入驻《应用中心-球馆版-实操教程...》</text>
      </view>
    </view>

    <!-- 学习民法典区域 -->
    <view class="civil-code-area">
   <!--   <text class="section-title">学习民法典</text>
      <view class="code-card">
        <view class="code-content">
          <text class="code-title">X月普法宣传</text>
          <text class="code-subtitle">学习民法典</text>
        </view>
        <image class="code-image" src="/static/Group_427319272.png"></image>
      </view> -->
    </view>

    <!-- 常用工具区域 -->
    <view class="common-tools-area">
      <text class="section-titles">常用工具</text>
      <view class="tools-grid">
        <view class="tool-item" v-for="(tool, index) in tools" :key="index">
          <image class="tool-icon" :src="tool.icon"></image>
          <text class="tool-name">{{ tool.name }}</text>
        </view>
      </view>
    </view>

    <!-- 消息动态区域 -->
    <view class="messages-area">
      <view class="messages-header">
        <text class="section-titless">消息动态</text>
        <text class="more-text">查看更多 ></text>
      </view>
      <view class="message-list">
        <view class="message-item" v-for="(message, index) in messages" :key="index">
          <image class="message-icon" src="/static/index/Group_427319315@2x.png"></image>
          <view class="message-content">
            <text class="message-title">{{ message.title }}</text>
            <text class="message-subtitle">{{ message.subtitle }}</text>
          </view>
          <text class="message-time">{{ message.time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import { getindex,getshopindex } from '../../api';
    	import store from '@/store';
  export default {
    data() {
      return {
        tools: [
          {
            name: "台名印管理",
            icon: "/static/index/guanli_1@2x.png"
          },
          {
            name: "订单中心",
            icon: "/static/index/dingdanzhongxin-2 1@2x.png"
          },
          {
            name: "商品中心",
            icon: "/static/index/shangpinzhongxin_1@2x.png"
          },
          {
            name: "团购中心",
            icon: "/static/index/shangpinzhongxin_1@2x.png"
          }
        ],
		shops:[],
		userinfos:[],
        messages: [
          {
            title: "购你有空运营通知",
            subtitle: "订单类型：客单",
            time: "5天"
          },
          {
            title: "购你有空运营通知",
            subtitle: "订单类型：套餐",
            time: "24天"
          },
          {
            title: "购你有空运营通知",
            subtitle: "订单类型：套餐",
            time: "34天"
          }
        ]
      }
    },
    onLoad() {
     
    },
    onShow() {
      this.init()	
    },
    methods: {
      async  init(){
			let res= await getshopindex();
			this.userinfos=res.data.userinfo;
			this.shops=res.data.shop;
			console.log(res,'res');
		}
    }
  }
</script>

<style scoped lang="scss">
  .container {
/*    padding: 24rpx; */
    background-color: #f5f5f5;
    min-height: 100vh;
    box-sizing: border-box;

	background-image: url('/static/Group_427319262.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-bottom: 200rpx;
  }

  /* 顶部用户信息区域 */
  .top-user-area {
	  box-sizing: border-box;
/*    background-color: #ffffff; */
    /* border-radius: 16rpx; */
    padding: 24rpx;
    margin-bottom: 24rpx;
  }
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;
  }
  .user-avatar {
    width: 132rpx;
    height: 132rpx;
    border-radius: 50%;
	border: 2rpx solid #ffffff;
    margin-right: 32rpx;
  }
  .user-details {
    flex: 1;
  }
  .user-name {
	  margin-top: 14rpx;
	  box-sizing: border-box;
    font-size: 36rpx;
    font-weight: bold;
    color: #222222;
    margin-bottom: 16rpx;
  }
  .user-subtitle {
    display: flex;
    align-items: center;
	width: 186rpx;
	height: 40rpx;
	line-height: 40rpx;
	background: linear-gradient( 91deg, #FFE9D2 0%, #F0BE82 100%);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	padding: 6rpx 12rpx;
	box-sizing: border-box;
	
  }
  .subtitle-text {
	  font-weight: 500;
	  font-size: 24rpx;
	  color: #764710;

  }
  .gonghao-icon {
   width: 28rpx;
   height: 28rpx;
   margin-right: 10rpx;
  }

	  .more-icon {
	   margin-left: 12rpx;
	   width: 68rpx;
	   height:68rpx;
	  }
  

  .warning-tips {
	  width: 692rpx;
	  height: 102rpx;
    padding: 20rpx;
	background-image: url('/static/index/Rectangle 34624278.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-sizing: border-box;
    // background-color: #FFF7E1;
    // border-radius: 8rpx;
	display: flex;
	.tips-text{
		margin-top: 3rpx;
		width: 54rpx;
		height: 58rpx;
		margin-right: 24rpx;
	}
	.tips-xu{
		margin-right: 18rpx;
		width: 2rpx;
		height: 60rpx;
		
	}
     .tips-right{
		 .item-hong{
			 width: 58rpx;
			 height: 28rpx;
			 background: #FFE9E9;
			 font-weight: 500;
			 font-size: 20rpx;
			 color: #FF4040;
			 text-align: center;
			 line-height: 28rpx;
			 
		 }
		 .item-huang{
			 width: 58rpx;
			 height: 28rpx;
			 background: #FFECDD;
			 font-weight: 500;
			 font-size: 20rpx;
			 color:#FF7D12;
			 text-align: center;
			 line-height: 28rpx;
		 }
	 }
  }
  .tip-item {
    display: flex;
    align-items: center;
    // margin-bottom: 8rpx;
  }
  .tip-item:last-child {
    margin-bottom: 0;
  }

  .tip-text {
	  margin-left: 20rpx;
 font-size: 24rpx;
 color: #555555;
    flex: 1;
  }

  /* 核心数据区域 */
  .core-data-area {
	  margin: 0 20rpx;
	  position: relative;
    // background-color: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx;
	width: 708rpx;
	height: 502rpx;
    margin-bottom: 24rpx;

	background-image: url('/static/index/Rectangle 34624281.png');
	// background-color: red;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-sizing: border-box;
  }
  .fiex-img{
	  position: absolute;
	  right:34rpx;
	  top: -55rpx;
	  width: 228rpx;
	  height: 260rpx;
	  image{
		  width: 228rpx;
		  height: 260rpx;
	  }
  }
  .data-header {
	  width: 422rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
	box-sizing: border-box;
  }
  .data-title {
   width: 150rpx;
   height: 44rpx;
  }
  .data-titles{
	  width: 38rpx;
	  height: 38rpx;
  }
  .date-range {
	  width: 126rpx;
	  height: 46rpx;
	  background: #FFFFFF;
	  border-radius: 68rpx 68rpx 68rpx 68rpx;
	  border: 1rpx solid #1EBE76;
    display: flex;
    align-items: center;
	line-height: 46rpx;
  }
  .date-text {
	  margin-left: 20rpx;
    font-size: 24rpx;
    color: #1EBE76;
    margin-right: 12rpx;
  }
  .date-icon {
    width: 24rpx;
    height: 24rpx;
  }
  .date-filter {
	  width: 424rpx;
	  height: 52rpx;
	  // text-align: center;
	  line-height: 52rpx;
	  background: linear-gradient( 90deg, #EFEFEF 0%, #FFFFFF 100%);
	  border-radius: 8rpx 8rpx 8rpx 8rpx;
    margin-bottom: 40rpx;
	box-sizing: border-box;
	padding-left: 12rpx;
	color: #777777;
	 font-size: 22rpx;
	// padding: 12rpx;
  }
  .filter-date {
    font-size: 22rpx;

  }
  .data-cards {
	  width: 644rpx;
	  height: 278rpx;
	  background-image: url('/static/index/Group 427319340.png');
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	  box-sizing: border-box;
    display: flex;
    // flex-direction: column;
  }
  .data-card {
	  width: 360rpx;
	  
  }
  .card-content {
	  margin: 22rpx 36rpx;
    flex: 1;
  }
  .card-title {
    font-size: 28rpx;
    color: #666666;
    margin-bottom: 16rpx;
    display: block;
	font-weight: bold;
  }
  .card-value {
    font-size: 48rpx;
    font-weight: bold;
    color: #333333;
  }
  .card-chart {
    width: 160rpx;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .chart-image {
    width: 140rpx;
    height: 100rpx;
  }
  .data-grid {
     margin-top: 20rpx;
  }
  .grid-item {
    width: 258rpx;
    height: 70rpx;
    background: #FFFFFF;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 1rpx solid #FFD7B7;
    text-align: center;
  padding: 20rpx 24rpx;
  box-sizing: border-box;
	display: flex;
	margin-bottom: 12rpx;
	image {
		 width: 30rpx;
		 height: 30rpx;
	}
  }
  .grid-label {
    font-size: 24rpx;
    color: #666666;
    display: block;
margin-left: 14rpx;
  }
  .grid-value {
	  margin-top: -8rpx;
	  margin-left: 46rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }

  /* 通用区域标题样式 */
  .section-title {
	  margin-top: 12rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    margin-right: 28rpx;

  }

  /* 公告区域 */
  .announcement-area {
	  width: 708rpx;
	  height: 92rpx;
   background-image: url('/static/index/Rectangle_34624289@2x.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   box-sizing: border-box;
    // padding: 24rpx;
	padding: 14rpx 16rpx;
    margin-right: 24rpx;
	margin-left: 24rpx;
	margin-bottom: 20rpx;
  }
  .announcement-content {
    display: flex;
    // align-items: center;

  }
  .announcement-icon {
    width: 58rpx;
    height: 62rpx;
    margin-right: 12rpx;
  }
  .announcement-text {
	  margin-top: 16rpx;
 font-weight: 400;
 font-size: 24rpx;
 color: #666666;
    // flex: 1;
  }

  /* 学习民法典区域 */
  .civil-code-area {
    border-radius: 16rpx;
    margin-bottom: 20rpx;
	width: 708rpx;
	height: 210rpx;
	margin-left: 24rpx;
	background-color: #CCCCCC;
  }
  .code-card {
    display: flex;
    align-items: center;
    padding: 24rpx;
    background: linear-gradient(135deg, #E8F8FF 0%, #F0F8FF 100%);
    border-radius: 12rpx;
  }
  .code-content {
    flex: 1;
  }
  .code-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 12rpx;
    display: block;
  }
  .code-subtitle {
    font-size: 24rpx;
    color: #666666;
  }
  .code-image {
    width: 160rpx;
    height: 120rpx;
  }

  /* 常用工具区域 */
  .common-tools-area {
	  width: 708rpx;
	  height: 238rpx;
	  box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 20rpx 34rpx;
	margin-left: 24rpx;
    margin-bottom: 20rpx;
	.section-titles{
		font-weight: bold;
		font-size: 28rpx;
		color: #0A2016;
	}
  }
  .tools-grid {
	  margin-top: 40rpx;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16rpx;
	
  }
  .tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    // padding: 20rpx 0;
  }
  .tool-icon {
    width: 52rpx;
    height: 52rpx;
    margin-bottom: 10rpx;
  }
  .tool-name {
    font-size: 24rpx;
    color: #333333;
  }

  /* 消息动态区域 */
  .messages-area {
	  margin-left: 22rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
	// margin-bottom: 400rpx;
	padding: 20rpx 34rpx ;
	box-sizing: border-box;
  }
  .messages-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
	.section-titless{
		font-weight: bold;
		font-size: 28rpx;
		color: #0A2016;
	}
	.more-text {
	  font-weight: 400;
	  font-size: 24rpx;
	  color: #666666;
	}
  }

  .message-list {
    display: flex;
    flex-direction: column;

  }
  .message-item {
	  height: 124rpx;
	  box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 2rpx solid #F5F5F5;

  }
  .message-item:last-child {
    border-bottom: none;
  }
  .message-icon {
    width: 76rpx;
    height: 76rpx;
    // border-radius: 8rpx;
    margin-right: 20rpx;
  }
  .message-content {
    flex: 1;
  }
  .message-title {
    font-size: 28rpx;
    color: #333333;
    display: block;
    margin-bottom: 8rpx;
  }
  .message-subtitle {
    font-size: 24rpx;
    color: #999999;
  }
  .message-time {
    font-size: 24rpx;
    color: #CCCCCC;
  }
</style>
